<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation
	<a class="m-link" href="https://ng-bootstrap.github.io/#/components/alert/examples" target="_blank">demos & documentation</a>
</m-notice>

<div class="row">
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleBasicAlert">
			<ngb-alert [dismissible]="false" [type]="'success'">
				<strong>Well done! </strong> You successfully read this important alert message.
			</ngb-alert>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleCloseableAlert">
			<div *ngFor="let alert of alerts">
				<ngb-alert [dismissible]="true" [type]="alert.type" (close)="closeAlert(alert)">{{ alert.message }}</ngb-alert>
			</div>
		</m-material-preview>
	</div>

	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleSelfClosingAlert">
			<div class="m-section">
				<h3 class="m-section__heading">Self closing</h3>
				<span class="m-section__sub">
					Static self-closing alert that disappears <strong>after 20 seconds</strong> (refresh the page if it has already disappeared)
				</span>
				<div class="m-section__content">
					<ngb-alert *ngIf="!staticAlertClosed" [type]="'brand'" (close)="staticAlertClosed = true">Check out our awesome new features!</ngb-alert>
				</div>
			</div>

			<div class="m-separator m-separator--dashed"></div>

			<div class="m-section">
				<h3 class="m-section__heading">Change message</h3>
				<span class="m-section__sub">
					Show a self-closing success message that disappears after 5 seconds.
				</span>
				<div class="m-section__content">
					<ngb-alert *ngIf="successMessage" [type]="'success'" (close)="successMessage = null">{{ successMessage }}</ngb-alert>
					<p>
						<button class="btn btn-primary" (click)="changeSuccessMessage()">Change message</button>
					</p>
				</div>
			</div>
		</m-material-preview>


		<m-material-preview [viewItem]="exampleCustomAlert">
			<div class="m-section">
				<span class="m-section__sub">
					Show a custom alert that can be styled via CSS or SCSS.
				</span>
				<div class="m-section__content">
					<ngb-alert type="custom" [dismissible]="false">
						<strong>Whoa!</strong> This is a custom alert.</ngb-alert>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleGlobalConfigurationOfAlerts">
			<ngb-alert [dismissible]="false" [type]="'success'">
				This alert's type is success and it's not dismissible because the config has been customized
			</ngb-alert>
		</m-material-preview>
	</div>
</div>